<template>
  <div>
    <div>
      <div class="btn-deep" @click="dialogAddCourse = true">
        {{ currnetId ? "编辑课程目录" : "添加课程目录" }}
      </div>
    <!--   <div class="btn-deep">课程设置</div> -->
    </div>
    <tableAssembly :data="dataList" :columns="columnsList"></tableAssembly>
    <!-- 课程资源重命名 -->
    <el-dialog
      title="编辑课程资源名称"
      :visible.sync="dialogRestName"
      width="60%"
      :before-close="handleCloseName"
    >
      <div class="f-row ai-c jc-c">
        <el-input
          style="width: 40rem"
          class="mr-2"
          v-model="restName"
        ></el-input>
        <div class="btn-deep" @click="restNameFn">保存</div>
      </div>
    </el-dialog>
    <!-- 编辑课程目录':'添加课程目录' -->
    <el-dialog
      :title="currnetId ? '编辑课程目录' : '添加课程目录'"
      :visible.sync="dialogAddCourse"
      width="60%"
      :before-close="handleClose"
    >
      <el-form :model="courseForm" :rules="courseRules" ref="courseForm">
        <el-form-item label="课程目录名称" prop="courseName">
          <el-input
            placeholder="请输入课程目录名称"
            v-model="courseForm.courseName"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传文件资源目录" prop="fileList">
          <el-upload
            class="upload-demo"
            :action="action"
            :before-upload="beforeAvatarUpload"
            :limit="1"
            :file-list="courseForm.fileList"
          >
            <div class="btn-deep">点击上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="f-row ai-c jc-fe">
        <div class="btn-light" @click="resetForm('courseForm')">取消</div>
     <!--    <div class="btn-deep">添加下一个目录</div> -->
        <div class="btn-deep" @click="submitForm('courseForm')">{{subBtn}}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import tableAssembly from "@/components/common/tabbleAssembly.vue";
import {
  curriculum_course,
  add_course,
  upfiles,
  move_course,
  del_course,
} from "@/request/api";
export default {
  components: {
    tableAssembly,
  },
  props: ["emitID", "courseTypeBf"],
  data() {
    return {
      subBtn:"保存",
      templateRadio: false,
      dialogRestName: false,
      currnetId: null, //当前编辑数据id
      action: "#",
      aa:['0','1'],
      courseForm: {
        courseName: "",
        fileList: [],
      },
      courseRules: {
        courseName: [
          { required: true, message: "请输入课程目录名称", trigger: "blur" },
        ],
        fileList: [
          { required: true, message: "请输上传文件资源目录", trigger: "blur" },
        ],
      },
      dialogAddCourse: false, //添加课程
      id: this.emitID,
      // 表单数据
      dataList: [
        /*  {
          catalogue: "第一节",
          resources: "第九套广播体操-出生的太阳",
          type: "1", //类型1 图文 2音频
          watchmode: "1", //是否付费
          sort: [1, 2], //排序可操作数组
        },
        {
          catalogue: "第一节",
          resources: "第九套广播体操-出生的太阳",
          watchmode: "2",
          sort: [1, 2, 3, 4],
        }, */
      ],
      // 表头数据
      columnsList: [
        {
          prop: "courseName",
          label: "课程目录",
        },
        {
          prop: "resources",
          label: "课程资源",

          render: (m) => {
            let imgSrc = require("../../assets/images/others/course-img.png");
            let audioSrc = require("../../assets/images/others/course-audio.png");
            let videoSrc = require("../../assets/images/others/course-video.png");
            //  {m.type == 1 ? (
            //       <img src={imgSrc} />
            //     ) : m.type == 2 ? (
            //       <img src={audioSrc} />
            //     ) : (
            //       <img src={videoSrc} />
            //     )}
            //     <span>{m.resources}</span>
            let src =
              m.sourceType == ".mp4"
                ? videoSrc
                : m.sourceType == ".mp3"
                ? audioSrc
                : imgSrc;
            return (
              <div class="f-row ai-c">
                <img src={src} class="img_a"></img>
                <span> {m.fileName}</span>
              </div>
            );
          },
        },
        {
          prop: "charge", //0免费 1付费
          label: "观看/下载",
          render: (m) => {
            // <el-radio v-model={m.watchmode} label="1">
            //     免费
            //   </el-radio>
            //   <el-radio v-model={m.watchmode} label="2">
            //     付费
            //   </el-radio>
            let orderNo = m.isCharge.toString();
            let orderNoShow = true;
            let isCharge = this.isCharge.find((i) => i.id == m.id).isCharge;
            console.log(m, 1999);
            return (
              <div>
                <el-radio-group
                v-model={orderNo}>
                  <el-radio label="0">免费</el-radio>
                  <el-radio label="1">付费</el-radio>
                </el-radio-group>
              </div>
            );
          },
        },
        {
          prop: "sort",
          label: "排序",
          render: (m) => {
            let length = this.dataList.length;
            let dom = null;
            if (length == 1) {
              dom = null;
            } else {
              this.dataList.forEach((e, index) => {
                if (e == m) {
                  if (index === 0) {
                    return (dom = (
                      <div>
                        <el-tag
                          class="cp"
                          type="info"
                          onClick={this.move.bind(this, 1, m.id)}
                        >
                          置底
                        </el-tag>
                        <el-tag
                          type="info"
                          class="cp"
                          onClick={this.move.bind(this, 3, m.id)}
                        >
                          下移
                        </el-tag>
                      </div>
                    ));
                  } else if (length - 1 === index) {
                    return (dom = (
                      <div>
                        <el-tag
                          type="info"
                          class="cp"
                          onClick={this.move.bind(this, 0, m.id)}
                        >
                          置顶
                        </el-tag>
                        <el-tag
                          type="info"
                          class="cp"
                          onClick={this.move.bind(this, 2, m.id)}
                        >
                          上移
                        </el-tag>
                      </div>
                    ));
                  } else {
                    return (dom = (
                      <div>
                        <el-tag
                          type="info"
                          class="cp mb-1"
                          onClick={this.move.bind(this, 0, m.id)}
                        >
                          置顶
                        </el-tag>
                        <el-tag
                          type="info"
                          class="cp mb-1"
                          onClick={this.move.bind(this, 2, m.id)}
                        >
                          上移
                        </el-tag>
                        <el-tag
                          type="info"
                          class="cp"
                          onClick={this.move.bind(this, 1, m.id)}
                        >
                          置底
                        </el-tag>
                        <el-tag
                          type="info"
                          class="cp"
                          onClick={this.move.bind(this, 3, m.id)}
                        >
                          下移
                        </el-tag>
                      </div>
                    ));
                  }
                }
              });
            }
            return <div>{dom}</div>;
          },
        },
        {
          prop: "handle",
          label: "操作",
          render: (m) => {
            return (
              <div>
                <span
                  class="btn-deep btn-edit mb-1"
                  onClick={this.emitData.bind(this, m)}
                >
                  编辑
                </span>
                <span
                  onClick={this.rename.bind(this, m.id)}
                  class="btn-deep dt-clr mb-1"
                >
                  重命名
                </span>
                <span
                  onClick={this.prescriptionDel.bind(this, m.id)}
                  class="btn-deep dp-ib mb-1"
                >
                  删除
                </span>
              </div>
            );
          },
        },
      ],
      restName: "", //课程资源名称
      courseType: this.courseTypeBf, //课程类型
    };
  },
  created() {
    console.log(this.emitID,this.id,887);
    this.$nextTick(() => {
      if (!this.id) {
        this.$message.error("请先完善课程基本信息！");
        /*  Bus.$emit('nextStepConrse') */
      }
      this.getCourse();
    });
  },
  methods: {
    //保存课程资源重命名
    restNameFn() {
      add_course({
        id: this.currnetId,
        fileName: this.restName,
      }).then((res) => {
        if (res.code == 200) {
          this.handleCloseName();
          this.getCourse();
        }
      });
    },
    //移动  0置顶 1置底 2上移 3下移
    move(type, id) {
      move_course(type, id).then((res) => {
        if (res.code == 200) {
          this.getCourse();
        }
      });
    },
    //编辑课程目录
    emitData(e) {
      this.currnetId = e.id;
      this.courseForm.courseName = e.courseName;
      this.courseForm.fileList = [
        {
          name: e.fileName,
          url: e.sourcePath,
        },
      ];
      this.dialogAddCourse = true;
    },
    //取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogAddCourse = false;
    },
    //提交
    submitForm(formName) {
      if(this.subBtn!='保存')return
      this.subBtn='保存中'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add_course({
            courseSeriesId: this.id, //新增
            id: this.currnetId, //编辑
            courseName: this.courseForm.courseName,
            fileName: this.courseForm.fileList.map((i) => i.name).toString(),
            sourcePath: this.courseForm.fileList.map((i) => i.url).toString(),
          }).then((res) => {
             this.subBtn='保存'
            if (res.code == 200) {
              this.resetForm("courseForm");
              this.handleClose();
              this.getCourse();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //文件上传
    beforeAvatarUpload(file) {
       this.subBtn='资源上传中'
      let type = file.type;
      let courseType = this.courseType;
      console.log(courseType,19999);
      /* 
        courseType 课程类型资源类型 0视频 1音频 2图文
        */
      switch (courseType) {
        case "0":
          var reg = /.mp4$/;
          if (reg.test(file.name)) {
            upfiles(file).then((res) => {
              this.subBtn='保存'
              if (res.code == 200) {
                this.$message({
                  message: "上传成功！",
                  type: "success",
                });
                this.courseForm.fileList = [
                  {
                    name: file.name,
                    url: res.result,
                  },
                ];
              } else {
                this.$message.error("上传失败");
              }
            });
          } else {
            this.$message.error("只能上传MP4视频哦！");
          }
          break;
        case "1":
          var reg = /.mp3$/;
          if (reg.test(file.name)) {
            upfiles(file).then((res) => {
               this.subBtn='保存'
              if (res.code == 200) {
                this.$message({
                  message: "上传成功！",
                  type: "success",
                });
                this.courseForm.fileList = [
                  {
                    name: file.name,
                    url: res.result,
                  },
                ];
              } else {
                this.$message.error("上传失败");
              }
            });
          } else {
            this.$message.error("只能上传MP3音频哦！");
          }
          break;
        case "2":
          var right_type = new Array(
            "avi",
            "wmv",
            "mpg",
            "mpeg",
            "mov",
            "rm",
            "ram",
            "swf",
            "flv",
            "mp4",
            "mp3",
            "wma",
            "avi",
            "rm",
            "rmvb",
            "flv",
            "mpg",
            "mkv"
          );
          let type_ = file.name.match(/^(.*)(\.)(.{1,8})$/)[3];
          if (!right_type.includes(type_)) {
            upfiles(file).then((res) => {
               this.subBtn='保存'
              if (res.code == 200) {
                this.$message({
                  message: "上传成功！",
                  type: "success",
                });
                this.courseForm.fileList = [
                  {
                    name: file.name,
                    url: res.result,
                  },
                ];
              } else {
                this.$message.error("上传失败");
              }
            });
          } else {
            this.$message.error("只能上传图文文件哦！");
          }

          break;
      }
    },
    //关闭 课程资源重命名弹框
    handleCloseName() {
      this.restName = "";
      this.currnetId = null;
      this.dialogRestName = false;
    },
    //关闭课程目录弹框
    handleClose() {
      this.currnetId = null;
      this.dialogAddCourse = false;
    },
    //获取该系列下的课程
    getCourse() {
      curriculum_course(this.id).then((res) => {
        this.dataList = res.result;
        this.isCharge = res.result.map((i) => {
          return {
            id: i.id,
            isCharge: i.isCharge.toString(),
          };
        });
      });
    },

    //重命名
    rename(id) {
      this.currnetId = id;
      this.dialogRestName = true;
    },
    //删除
    prescriptionDel(id) {
      del_course(id).then((res) => {
        if (res.code == 200) {
          this.getCourse();
        }
      });

    },
  },
};
</script>
<style lang="less" scoped>
.img_a {
  width: 1.875rem;
  height: 1.875rem;
}
.btn-edit {
  background: #fbad3f !important;
}
.dt-clr {
  background: #68cabe !important;
}
.el-tag {
  margin-right: 0.625rem;
}
</style>